<template>
    <vab-icon
        v-if="theme.showFullScreen"
        :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'"
        @click="click"
    />
</template>

<script lang="ts">
import BaseVue from '@/common/base-vue'
import screenfull from 'screenfull'
import {SettingsGetterEnum} from "../../../store/enum/store.enum";
import Component from 'vue-class-component';

@Component({})
export default class VabFullScreen extends BaseVue {
    private isFullscreen: boolean = false;

    get theme() {
        return this.$store.getters[SettingsGetterEnum.theme];
    }

    mounted() {
        this.init();
    };

    beforeUnmount() {
        this.destroy();
    };

    private click():boolean {
        if (!screenfull.isEnabled) {
            this.baseMessage(
                '开启全屏失败',
                'error',
                false,
                'vab-hey-message-error'
            )
            return false;
        }
        screenfull.toggle();
        this.$emit('refresh');
    };

    private change() {
        this.isFullscreen = screenfull.isFullscreen;
    };

    private init() {
        if (screenfull.isEnabled) {
            screenfull.on('change', this.change);
        }
    };

    private destroy() {
        if (screenfull.isEnabled) {
            screenfull.off('change', this.change);
        }
    };

}
</script>
